<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>消息流式发送测试</title>
    <style>
        body { font-family: Arial, sans-serif; background: #f7f7f7; margin: 0; padding: 0; }
        .container { max-width: 600px; margin: 40px auto; background: #fff; border-radius: 8px; box-shadow: 0 2px 8px #0001; padding: 32px; }
        h2 { text-align: center; color: #333; }
        .form-group { margin-bottom: 18px; }
        label { display: block; margin-bottom: 6px; color: #555; }
        input, select, textarea { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; }
        button { padding: 10px 24px; background: #1976d2; color: #fff; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; }
        button:disabled { background: #aaa; }
        .output-box, .log-box { background: #222; color: #eee; min-height: 80px; padding: 10px; border-radius: 4px; font-family: monospace; margin-top: 8px; white-space: pre-wrap; }
        .log-box { background: #f5f5f5; color: #444; min-height: 40px; font-size: 13px; }
        .row { display: flex; gap: 10px; }
        .row .form-group { flex: 1; margin-bottom: 0; }
    </style>
</head>
<body>
<div class="container">
    <h2>消息流式发送测试</h2>
    <div class="form-group">
        <label>后端BaseUrl</label>
        <input id="baseUrl" value="http://127.0.0.1:7081/api/client" placeholder="如 /api/client 或 http://localhost:8080/api/client" />
    </div>
    <div class="form-group">
        <label>Token</label>
        <input id="token" placeholder="请输入token" />
    </div>
    <div class="form-group row">
        <div class="form-group">
            <label>对话框ID (dialogId)</label>
            <input id="dialogId" placeholder="对话框ID" />
        </div>
        <div class="form-group">
            <label>聊天类型 (dialogType)</label>
            <select id="dialogType">
                <option value="agent">agent</option>
                <option value="group">group</option>
            </select>
        </div>
    </div>
    <div class="form-group row">
        <div class="form-group">
            <label>linkId (agent_id/group_id)</label>
            <input id="linkId" placeholder="agent_id 或 group_id" />
        </div>
        <div class="form-group">
            <label>SessionId</label>
            <input id="sessionId" placeholder="点击下方按钮自动获取" readonly />
        </div>
    </div>
    <div class="form-group">
        <label>agentSessionId (可选)</label>
        <input id="agentSessionId" placeholder="agentSessionId（可选）" />
    </div>
    <div class="form-group">
        <label>消息内容 (content)</label>
        <textarea id="content" rows="3" placeholder="请输入要发送的内容"></textarea>
    </div>
    <div class="form-group row">
        <button onclick="getSessionId()">获取SessionId</button>
        <button onclick="sendMessage()">发送消息并流式输出</button>
    </div>
    <div class="form-group">
        <label>流式输出结果：</label>
        <div class="output-box" id="streamOutput"></div>
    </div>
    <div class="form-group">
        <label>日志输出：</label>
        <div class="log-box" id="logBox"></div>
    </div>
</div>
<script>
let currentSessionId = '';

function log(msg) {
    const logBox = document.getElementById('logBox');
    logBox.textContent += `[${new Date().toLocaleTimeString()}] ${msg}\n`;
    logBox.scrollTop = logBox.scrollHeight;
}

function setSessionId(val) {
    document.getElementById('sessionId').value = val;
    currentSessionId = val;
}

async function getSessionId() {
    const baseUrl = document.getElementById('baseUrl').value.trim();
    const token = document.getElementById('token').value.trim();
    if (!token) {
        log('请先输入token');
        return;
    }
    log('请求SessionId...');
    try {
        const resp = await fetch(baseUrl + '/sse/connect', {
            method: 'GET',
            headers: {
                'Content-Type': 'application/json',
                'token': token
            }
        });
        const data = await resp.json();
        if (data && data.code === 200 && data.data && data.data.sessionId) {
            setSessionId(data.data.sessionId);
            log('获取SessionId成功: ' + data.data.sessionId);
        } else {
            log('获取SessionId失败: ' + (data.message || JSON.stringify(data)));
        }
    } catch (e) {
        log('获取SessionId异常: ' + e);
    }
}

function sendMessage() {
    const baseUrl = document.getElementById('baseUrl').value.trim();
    const token = document.getElementById('token').value.trim();
    const dialogId = document.getElementById('dialogId').value.trim();
    const dialogType = document.getElementById('dialogType').value;
    const linkId = document.getElementById('linkId').value.trim();
    const sessionId = document.getElementById('sessionId').value.trim();
    const agentSessionId = document.getElementById('agentSessionId').value.trim();
    const content = document.getElementById('content').value.trim();
    const output = document.getElementById('streamOutput');
    output.textContent = '';
    if (!token) {
        log('请先输入token');
        return;
    }
    if (!sessionId) {
        log('请先获取SessionId');
        return;
    }
    if (!dialogType || !linkId || !content) {
        log('请填写所有必填参数');
        return;
    }
    log('开始发送消息...');
    const body = {
        dialogId,
        dialogType,
        linkId,
        sessionId,
        content
    };
    if (agentSessionId) {
        body.agentSessionId = agentSessionId;
    }
    fetch(baseUrl + '/message/sendMessage', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'token': token,
            'X-Session-ID': sessionId
        },
        body: JSON.stringify(body)
    }).then(resp => {
        if (!resp.body) {
            log('后端未返回流式内容');
            return;
        }
        const reader = resp.body.getReader();
        const decoder = new TextDecoder('utf-8');
        function read() {
            reader.read().then(({done, value}) => {
                if (done) {
                    log('流式输出结束');
                    return;
                }
                const text = decoder.decode(value);
                output.textContent += text;
                output.scrollTop = output.scrollHeight;
                read();
            });
        }
        read();
        log('已连接，等待流式内容...');
    }).catch(e => {
        log('发送消息异常: ' + e);
    });
}
</script>
</body>
</html>